<template>
    <view class="container">
        <view class="banner">
            <image :src="iconUrl+'login-banner.jpg'"></image>
        </view>
        <view class="wx-login">
            <u-button type="primary" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">微信用户一键登录</u-button>
        </view>
        <view class="phone-login">
            <text @click="phoneLogin">手机号码登录/注册</text>
        </view>

        <view class="customer-phone">
            <text @click="playPhone()">{{customerPhone}}</text>
        </view>

        <view class="bottom-login">
            <text style="color:#B8B8B8">登录代表您已同意</text>
            <text style="color:#6C7EA3" @click="toProtocol">资税通用户服务协议</text>
        </view>
        <view>
            <u-modal v-model="wxShow" title="请选择登录角色" @confirm="wxConfirm" content=""
                     content-style="background-color:grey">
                <view class="modal-select">
                    <u-radio-group v-model="merType">
                        <u-radio name="1">自由职业者</u-radio>
                        <u-radio name="2">商户端</u-radio>
                    </u-radio-group>
                </view>
            </u-modal>
        </view>
        <view>
            <u-modal v-model="phoneShow" title="请选择登录角色" @confirm="phoneConfirm" content=""
                     content-style="background-color:grey">
                <view class="modal-select">
                    <u-radio-group v-model="merType">
                        <u-radio name="1">自由职业者</u-radio>
                        <u-radio name="2">商户端</u-radio>
                    </u-radio-group>
                </view>
            </u-modal>
        </view>


    </view>
</template>

<script>
    import WXBizDataCrypt from "@/static/js/WXBizDataCrypt.js";

    export default {
        data() {
            return {
                iconUrl: this.iconUrl,
                wxShow: false,
                phoneShow: false,
                merType: '1',
                phoneNumber: '',
                customerPhone: ''
            }
        },
        onLoad() {
            uni.login({
                success: (res) => {
                    // console.log(JSON.stringify(res));
                    if (res.code) {         //微信登录成功 已拿到code
                        this.$sendRequest({
                            url: '/api/wx/getSession',
                            method: 'POST',
                            data: {
                                code: res.code              //wx.login 登录成功后的code
                            },
                            success: (cts) => {
                                // 换取成功后 暂存这些数据 留作后续操作
                                this.openid = cts.data.openid;    //openid 用户唯一标识
                                this.session_key = cts.data.session_key;    //session_key  会话密钥
                                this.customerPhone = cts.data.customerPhone;
                            }
                        });
                    } else {
                        console.log('登录失败！' + res.errMsg)
                    }
                }
            })
        },
        methods: {
            playPhone(){
                uni.makePhoneCall({
                    phoneNumber: this.customerPhone,
                    success: (res) => {
                        console.log('调用成功!')
                    },
                    fail: (res) => {
                        console.log('调用失败!')
                    }
                });
            },
            toProtocol() {
                uni.navigateTo({
                    url: '/pages/login/protocol'
                });
            },
            phoneLogin() {
                this.phoneShow = true;
            },
            wxConfirm() {
                this.show = false;
                //设置用户角色, 1:自由职业者 2:商户端
                uni.setStorage({
                    key: 'mer_type',
                    data: this.merType
                });
                if (this.phoneNumber === '') {
                    this.$u.toast('您好,登录需要授权访问手机号!');
                    return;
                }
                this.$sendRequest({
                    url: '/api/wx/register',
                    method: 'POST',
                    data: {
                        phoneNumber: this.phoneNumber,
                        sessionKey: this.session_key,
                        merType: this.merType
                    },
                    success: (cts) => {
                        uni.setStorage({
                            key: 'access-token',
                            data: cts.data
                        });
                        if (this.merType === '1') {
                            uni.switchTab({
                                url: "/pages/task/index"
                            });
                        }
                        if (this.merType === '2') {
                            uni.switchTab({
                                url: "/pages/task/merIndex"
                            });
                        }
                    }
                });

            },
            phoneConfirm() {
                this.show = false;
                uni.setStorage({
                    key: 'mer_type',
                    data: this.type
                });
                uni.navigateTo({
                    url: "/pages/login/phone?merType=" + this.merType
                });
            },
            onGetPhoneNumber(e) {
                if (e.detail.errMsg === "getPhoneNumber:fail user deny") {       //用户决绝授权

                } else {
                    //允许授权
                    if (this.session_key === '') {
                        this.$u.toast('服务器异常!');
                    }
                    let pc = new WXBizDataCrypt('wxd5db0d0403fe1d94', this.session_key);
                    let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
                    this.phoneNumber = data.phoneNumber;
                    this.wxShow = true;
                }
            }

        }

    }
</script>

<style lang="scss">
    page{
        background: white;
    }
    .container{

        .banner{
            margin-top:30rpx;
            display: flex;
            justify-content:center;
            image{
                width: 80%;
                height: 400rpx;
            }
        }
        .wx-login{
            margin-top: 80rpx;
            margin-bottom: 40rpx;
            button {
                width:680rpx;
            }
        }
        .phone-login{
            text-align: center;
            text{
                font-size:24rpx;
                color:#6C7EA3;

            }
        }
        .customer-phone{
            font-size:24rpx;
            position: fixed;
            left: 230rpx;
            bottom: 100rpx;
        }
        .bottom-login{
            font-size:22rpx;
            position: fixed;
            left: 180rpx;
            bottom: 60rpx;
        }
        .modal-select{
            display: flex;
            justify-content: center;
            margin: 40rpx auto ;
        }
    }

</style>
